<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <script src="http://at.alicdn.com/t/font_1969634_ece82v9je5f.js"></script>

    <title>10秒挑战赛</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .main {
        background: #eeeeee;
        padding: 1rem;
    }

    .prizeL {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /*flex-flow:wrap;*/
        overflow: scroll;
        padding: 0.5rem 0;
    }

    .prizeL .item {
        background: #ffffff;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        border: 1px solid #eeeeee;
        padding: 0 0.2rem;
        margin: .2rem;
    }

    .item .title {
        color: #aaaaaa;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: .1rem;
    }

    .item .icon {
        width: 3rem;
        height: 3rem;
        padding: .5rem 0;
        border-radius: 100%;
        fill: currentColor;
    }

    .item .ct {
        color: #5a5a5a;
        padding-bottom: .5rem;
        font-size: .75rem;
        width: 5rem;
        text-align: center;
    }

    .time {
        padding: 1rem;
        background: #ffffff;
        display: flex;
        align-items: center;
        margin-top: 1rem;
        flex-flow: column;
    }

    .time .sj {
        font-size: 1.5rem;
        color: #210a16;
        font-weight: 700;
    }

    .time .bt {
        margin-top: 1rem;
        width: 4rem;
        height: 4rem;
        background: red;
        border-radius: 100%;
        border: 2px solid #e61919;
        box-shadow: 4px 0px 4px 0px #eee;
        align-items: center;
        justify-content: center;
        display: flex;
        color: #ffffff;
    }

    .time .bt:active {
        margin-top: 1rem;
        width: 4rem;
        height: 4rem;
        background: red;
        border-radius: 100%;
        border: 4px solid #620b0b;
        box-shadow: 4px 0px 4px 0px #eee;
        align-items: center;
        justify-content: center;
        display: flex;
        color: #ffffff;
    }

    .sm {
        padding: 1rem 0;
        background: #ffffff;
        display: flex;
        align-items: center;
        margin-top: 1rem;
        flex-flow: column;
    }

    .sm .title {
        text-align: center;
        padding-bottom: .5rem;
        width: 100%;
        color: #aaaaaa;

    }

    .sm .it {
        padding: 0.2rem .5rem;
        color: #aaaaaa;
        font-size: 0.75rem;
    }
</style>
<body>
<div class="main">
    <div class="prizeL">
        <div class="item">
            <div class="title">周一</div>
            <svg class="icon" aria-hidden="true" color="#d81e06">
                <use xlink:href="#icon-hongbao2"></use>
            </svg>
            <div class="ct">
                <span>5元现金红包</span>
            </div>
        </div>
        <div class="item">
            <div class="title">周一</div>
            <svg class="icon" aria-hidden="true" color="#d81e06">
                <use xlink:href="#icon-hongbao2"></use>
            </svg>
            <div class="ct">
                <span>5元现金红包</span>
            </div>
        </div>
        <div class="item">
            <div class="title">周一</div>
            <svg class="icon" aria-hidden="true" color="#d81e06">
                <use xlink:href="#icon-hongbao2"></use>
            </svg>
            <div class="ct">
                <span>5元现金红包</span>
            </div>
        </div>
        <div class="item">
            <div class="title">周一</div>
            <svg class="icon" aria-hidden="true" color="#d81e06">
                <use xlink:href="#icon-hongbao2"></use>
            </svg>
            <div class="ct">
                <span>5元现金红包</span>
            </div>
        </div>
        <div class="item">
            <div class="title">周一</div>
            <svg class="icon" aria-hidden="true" color="#d81e06">
                <use xlink:href="#icon-hongbao2"></use>
            </svg>
            <div class="ct">
                <span>5元现金红包</span>
            </div>
        </div>
        <div class="item">
            <div class="title">周一</div>
            <svg class="icon" aria-hidden="true" color="#d81e06">
                <use xlink:href="#icon-hongbao2"></use>
            </svg>
            <div class="ct">
                <span>5元现金红包</span>
            </div>
        </div>
        <div class="item">
            <div class="title">周一</div>
            <svg class="icon" aria-hidden="true" color="#d81e06">
                <use xlink:href="#icon-hongbao2"></use>
            </svg>
            <div class="ct">
                <span>5元现金红包</span>
            </div>
        </div>
    </div>
    <div class="time">
        <div class="sj">00:00</div>
        <div class="bt">
            <span>开始</span>
        </div>
    </div>
    <div class="sm">
        <div class="title">规则说明</div>
        <div class="it">
            <span>1.点击开始按钮时间开始滚动，将时间停止在10秒的一刻，您将获得当天的奖品。</span>
        </div>
        <div class="it">
            <span>1.点击开始按钮时间开始滚动，将时间停止在10秒的一刻，您将获得当天的奖品。</span>
        </div>
        <div class="it">
            <span>1.点击开始按钮时间开始滚动，将时间停止在10秒的一刻，您将获得当天的奖品。</span>
        </div>
        <div class="it">
            <span>1.点击开始按钮时间开始滚动，将时间停止在10秒的一刻，您将获得当天的奖品。</span>
        </div>
    </div>

</div>
</body>
</html>